<template>
  <mapgis-web-map
      crs="EPSG:3857"
      :center="[125.3,43.85]"
      :zoom="10"
    >
    <!-- :mapStyle='{"version":8,"sources":{},"layers":[{"id":"背景","type":"background","paint":{"background-color":"rgba(0, 0, 0, 0.5)"}}]}' -->

    <!-- 基础底图 -->
    <mapgis-rastertile-layer
      layerId="tdt"
      url="http://t0.tianditu.com/DataServer?T=vec_w&L={z}&Y={y}&X={x}&tk=9c157e9585486c02edf817d2ecbc7752"
    />

    <!-- 量测工具 -->
    <div class="measure-story-control">
      <mapgis-measure enableControl isAdvanceControl></mapgis-measure>
    </div>

    
    <!-- 地图状态栏 -->
     <div class="my-map-state">
        <!-- <mapgis-state :default="true" scale level lng lat /> -->
        <mapgis-state :default="false">
          <template v-slot:default="{state}">
            <mapgis-ui-input-group size="default" class="mapgis-test-2d-statebar">
              <mapgis-ui-input addon-before="级别" :value="state.level"/>
              <mapgis-ui-input addon-before="比例尺" :value="state.scale"/>
              <mapgis-ui-input addon-before="经度" :value="state.lng" />
              <mapgis-ui-input addon-before="纬度" :value="state.lat"/>
            </mapgis-ui-input-group>
          </template>
        </mapgis-state>
     </div>
    

  </mapgis-web-map>
</template>

<script>
// import { defineComponent } from '@vue/composition-api'

// export default defineComponent({
//     setup() {
        
//     },
// })
</script>

<style scoped>
.measure-story-control {
    position: absolute;
    top: 30px;
    right: 30px;

    z-index: 9;
    background: aliceblue;
    border-radius: 10px;
}

.my-map-state {
    position: fixed;
    bottom: 10px;
    /* right: 10px; */
    /* margin: auto 0; */
    /* right: 10px; */
    z-index: 9;
    background: aliceblue;
    /* border-radius: 10px; */
    /* height: 120px; */
    width: 99%;

}

</style>
